<template>
  <div id="indexSwiper">
    <div class="index-albums-title">
      <p>精选图片</p>
    </div>
    <div class="swiper-container index-albums">
      <div class="swiper-wrapper">
        <div class="swiper-slide index-album" v-for="(itemA, indexA) in albums" :key="indexA">
          <div class="swiper-container index-photos">
            <span class="index-album-name" v-on:click="goAlbum(itemA.id)">{{itemA.name}}</span>
            <div class="swiper-wrapper">
              <div class="swiper-slide index-photo" v-for="(itemP, indexP) in itemA.photos" :key="indexP">
                <img :src="itemP.subUrl" v-on:click="goAlbum(itemP.id)"/>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination index-pagination-album"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import https from '../../https'

export default {
  name: 'indexSwiper',
  data () {
    return {
      albums: []
    }
  },
  mounted () {
    https.fetchPost('album/getByRankingInfo', {}).then((data) => {
      this.albums = data.data.data
      this.$nextTick(function () {
        /* eslint-disable no-new */
        var swiper1 = new Swiper('.index-photos', {
          effect: 'coverflow',
          loop: true,
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: false
          },
          spaceBetween: 50,
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true // 修改swiper的父元素时，自动初始化swiper
        })
        var swiper2 = new Swiper('.index-albums', {
          direction: 'vertical',
          autoplay: true,
          loop: true,
          spaceBetween: 50,
          pagination: {
            el: '.index-pagination-album',
            clickable: true
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true // 修改swiper的父元素时，自动初始化swiper
        })
        swiper2.el.onmouseover = function () {
          swiper2.autoplay.stop()
        }
        swiper2.el.onmouseout = function () {
          swiper2.autoplay.start()
        }
      })
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    goAlbum: function (id) {
      this.$router.push({name: 'photo', query: {id: id}})
    }
  }
}
</script>
<style scoped>
  #indexSwiper {
    margin: auto;
    width: 1100px;
  }

  .index-albums-title {
    margin: 1rem;
    width: 1100px;
  }

  .index-albums-title p {
    margin: auto;
    color: #fff;
    width: 10rem;
    font: normal 1.5rem/2.5rem 微软雅黑;
    background-color: rgb(29, 205, 199);
    border-radius: 0.5rem;
    letter-spacing: 0.5rem;
  }

  .index-album-name {
    font: normal 2rem/3rem 微软雅黑;
    cursor: pointer;
    letter-spacing: 0.5rem;
    transition: color 0.3s;
    -moz-transition: color 0.3s; /* Firefox 4 */
    -webkit-transition: color 0.3s; /* Safari 和 Chrome */
    -o-transition: color 0.3s; /* Opera */
  }

  .index-album-name:hover {
    color: rgb(29, 205, 199);
  }

  .swiper-slide {
    height: 45px;
    text-align: center;
  }

  .index-albums {
    height: 500px;
    border: 0.2rem solid rgb(29, 205, 199);
    border-radius: 1rem;
    padding: 1rem;
  }

  .index-album {
    margin: auto;
    height: 400px;
  }

  .index-photo {
    height: 450px;
    width: 300px;
    line-height: 450px;
  }

  .index-photo img {
    vertical-align: middle;
  }
</style>
